@import '../../styles/colors';
@import '../../styles/helpers';
@import '../../styles/variables';

$alert-color: $color-text-lighter;
$alert-font-family: $font-family;
$alert-background-color: $bg-color-darker;
$alert-success-background-color: $color-green;
$alert-warning-background-color: $color-yellow;
$alert-error-background-color: $color-red;

.alert {
	display: flex;
	overflow: hidden;

	width: 100%;
	height: 28px;
	padding: 6px 16px;

	letter-spacing: 0;

	color: $alert-color;
	background-color: $alert-background-color;

	font-family: $alert-font-family;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	align-items: center;
	justify-content: space-between;

	&__content {
		overflow: hidden;

		white-space: nowrap;
		text-overflow: ellipsis;
	}

	&__close {
		display: flex;

		padding: 0;

		cursor: pointer;

		color: $alert-color;
		border: none;
		outline: none;
		background: none;

		@include pressable-button(1px);
	}

	&--success {
		background-color: $alert-success-background-color;
	}

	&--warning {
		background-color: $alert-warning-background-color;
	}

	&--error {
		background-color: $alert-error-background-color;
	}
}
